<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据用户名查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <div style="margin:10px 0;">
            <el-button type="primary" @click="handAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <el-table :data="tableData" style="max-height: 500px;overflow: auto;">
            <el-table-column prop="name" label="宠物名字" width="140">
            </el-table-column>
            <el-table-column prop="typeName" label="类型" width="120">
            
            </el-table-column>
            <el-table-column prop="customerName" label="主人" width="140">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="140">
            </el-table-column>
            <el-table-column prop="image" label="图片">
                <template slot-scope="{ row }">
                    <el-image style="width: auto; height: 40px; border:none;cursor:pointer ;" :src="getImage(row.image)"
                        :preview-src-list="[`http://localhost:8081/common/download?name=${row.image}`]">
                        <div slot="error" class="image-slot">
                            <img src="" style="width: auto; height: 40px; border:none;">
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="最近更新时间" width="140">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handEdit(scope.row)">编辑</el-button>
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='我在想想'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="deleteById(scope.row.id)">
                        <!-- @confirm:确认提示框 -->
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="修改宠物" :visible.sync="updatedialogFormVisible">
            <el-form :model="form">
                <el-form-item label="宠物名字" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物类型" label-width="120px">
                    <el-select clearable v-model="form.petTypeId" placeholder="请选择宠物类型" style="width: 100%">
                        <el-option v-for="item in petTypeList" :key="item.typeName" :label="item.typeName" :value="item.id">
                            <i :class="item.value" /> {{ item.typeName }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主人名" label-width="120px">
                    <el-input v-model="form.customerName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="120px">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像" label-width="120px">
                    <el-upload class="avatar-uploader" action="http://localhost:8081/common/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :on-change="onChange" ref="upload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 6;"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="updateSave">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增宠物" :visible.sync="adddialogFormVisible">
            <el-form :model="form">
                <el-form-item label="宠物名字" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物类型" label-width="120px">
                    <el-select clearable v-model="form.petTypeId" placeholder="请选择宠物类型" style="width: 100%">
                        <el-option v-for="item in petTypeList" :key="item.typeName" :label="item.typeName" :value="item.id">
                            <i :class="item.value" /> {{ item.typeName }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主人名" label-width="120px">
                    <el-select clearable v-model="form.customerId" placeholder="请选择客户" style="width: 100%" filterable>
                        <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id">
                            <i :class="item.value" /> {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" label-width="120px">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像" label-width="120px">
                    <el-upload class="avatar-uploader" action="http://localhost:8081/common/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :on-change="onChange" ref="upload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 6;"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="addSave">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Pet",
    data() {
        return {
            tableData: null,
            currentPage4: 4,
            total: 0,
            page: 1,
            pageSize: 3,
            input: '',
            updatedialogFormVisible: false,
            adddialogFormVisible: false,
            form: '',
            imageUrl: '',
            petTypeList: [],
            customerList: []
        }
    },
    created() {
        this.load();
        this.getPetTypeList();
        this.getCustomerList();
    },
    methods: {
        getPetTypeList() {
            this.request.get("/pet-type/list").then(res => {
                if (res.code == 200) {
                    this.petTypeList = res.data
                    console.log("当前petTypeList==>", res.data)
                }
            })
        },
        getCustomerList() {
            this.request.get("/customer").then(res => {
                if (res.code == 200) {
                    this.customerList = res.data
                    console.log("当前customereList==>", res.data)

                }
            })
        },
        cancelDialog() {
            this.updatedialogFormVisible = false;
            this.adddialogFormVisible = false;
            this.imageUrl = '';
        },
        getImage(image) {
            return "http://localhost:8081/common/download?name=" + image
        },
        onChange(file) {//校验图片格式
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
        handleAvatarSuccess(res) {
            console.log("当前response==》",res.data)
            this.imageUrl = "http://localhost:8081/common/download?name=" + res.msg//图片回显
            this.form.image = res.msg
        },
        deleteById(id) {
            this.request.delete(`/pet/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        updateSave() {//新增提交数据方法
            console.log("当前petForm===>", this.form)
            this.request.post("/pet", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.updatedialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.updatedialogFormVisible = false
            this.load();
            this.form = {};
        },
        addSave() {
            console.log("当前petForm===>", this.form)
            this.request.post("/pet", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.adddialogFormVisible = false
            this.load();
            this.form = {};
        },
        handEdit(row) {//打开编辑窗口
            this.form = row
            console.log("当前petForm===>", row)
            this.imageUrl = "http://localhost:8081/common/download?name=" + row.image
            this.updatedialogFormVisible = true;
        },
        handAdd() {//打开新增窗口
            this.adddialogFormVisible = true;
            this.form = {};
            this.imageUrl = ''
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            this.request.get("/pet/page", {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input
                }
            }).then(res => {
                console.log("当前data==>", res.data.records)
                this.tableData = res.data.records;
                this.total = res.data.total;
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        },
    }
}
</script>

<style scoped>
.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>